<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>不迷失-Admin 文章编辑</title>
    <div th:replace="head"></div>
    <link rel="stylesheet" th:href="@{/editor.md/css/editormd.css}"/>
</head>

<body class="hold-transition skin-blue sidebar-mini ">
<div class="wrapper">

    <div th:replace="header"></div>
    <div th:replace="sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <!-- Main content -->
        <section class="content">

            <div class="row">
                <div class="col-md-12">
                    <!-- Horizontal Form -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">博客文章编辑</h3>
                        </div>
                        <!-- /.box-header -->

                        <h2 th:if="${rep!=null &amp;&amp; !rep.success}" th:text="${rep.msg}"></h2>
                        <!-- form start -->
                        <form th:if="${rep==null || rep.success}" class="form-horizontal" th:action="@{${api}}" method="post">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">主标题</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="title" th:value="${isUpdate}? ${rep.data.title}"
                                               class="form-control" id="inputEmail3" placeholder=""
                                               required="required" maxlength="50"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">副标题</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="secondTitle"
                                               th:value="${isUpdate}?(${rep.data.secondTitle}?${rep.data.secondTitle})"
                                               class="form-control" id="inputEmail3" placeholder=""
                                               maxlength="30"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">分类</label>

                                    <div class="col-sm-10">
                                        <select name="catalog"
                                                class="form-control" required>
                                            <option th:each="item : ${catalogs}" th:value="${item.id}" th:text="${item.label}" th:selected="${isUpdate}?(${item.id==rep.data.catalog}?'selected')" >java</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label">微信文章链接</label>

                                    <div class="col-sm-10">
                                        <input class="form-control" type="url" name="wechatLink"  th:value="${isUpdate}? (${rep.data.wechatLink}?${rep.data.wechatLink})"/>

                                    </div>
                                </div>


                                <div id="editormd">
                                    <textarea class="editormd-markdown-textarea" name="md"
                                              th:text="${rep}?(${rep.data}? ${rep.data.md})"></textarea>;

                                    <textarea class="editormd-html-textarea" name="display" id="display"></textarea>;
                                </div>
                                <br/><br/>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer" style="text-align: center;">
                                <button id="submitBtn" type="submit" class="btn btn-info">Submit</button>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                    <!-- /.box -->

                </div>
            </div>
            <!-- /.row -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <div th:replace="footer"></div>
</div>
<!-- ./wrapper -->
<div th:replace="script"></div>
<!--<script th:src="@{/editor.md/jquery.min.js}"></script>-->
<script th:src="@{/editor.md/editormd.min.js}"></script>
<script th:src="@{/js/jquery.serializejson.min.js}"></script>
<script th:src="@{/js/ajax-setup.js}"></script>
<script th:src="@{/js/form-json-submit.js}"></script>
<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("editormd", {
            width: "95%",
            height: 640,
            syncScrolling: "single",
            path: "/editor.md/lib/",
            saveHTMLToTextarea: true,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/upload/image"

        });

        $("#submitBtn").click(function (event) {
            if (testEditor.getMarkdown()===""){
                alert("内容不能为空");
                event.preventDefault();
                return;
            }
            processHtml();
        })

    });

    function processHtml() {
        var html = testEditor.getPreviewedHTML();
        $("#display").val(html);

    }
</script>


</body>
</html>